import style from './index.module.less'
import { SearchBar, Skeleton, ImageViewer } from 'antd-mobile'
// import { setList } from '@src/redux/reducers/pages'
// import uuid from 'uuid'
import { UnorderedListOutline } from 'antd-mobile-icons'
import btn1 from '@imgs/home-btn1.png'
import btn2 from '@imgs/home-btn2.png'
import btn3 from '@imgs/home-btn3.png'
import btn4 from '@imgs/home-btn4.png'
import btn5 from '@imgs/home-btn5.png'
import gonggaoPic from '@imgs/home-gonggao.png'
import item1 from '@imgs/home-item1.png'
import item2 from '@imgs/home-item2.png'
import item3 from '@imgs/home-item3.png'
import item4 from '@imgs/home-item4.png'
import item5 from '@imgs/home-item5.png'
import item6 from '@imgs/home-item6.png'
import item7 from '@imgs/home-item7.png'
import item8 from '@imgs/home-item8.png'
import { getGonggaoRequest, getBannerRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { root } from '@src/assets/js/config'

const imgMap = {
  '民商事仲裁受理范围': item1,
  '仲裁流程': item2,
  '中华人民共和国仲裁法': item3,
  '各仲裁委员会仲裁规则': item4,
  '各仲裁委员会仲裁收费标准': item5,
  '仲裁须知': item6,
  '仲裁申请材料': item7,
  '救济途径': item8
}

const listMap = {
  '各仲裁委员会仲裁收费标准': '黑龙江省各地市仲裁委员会仲裁收费标准',
  '各仲裁委员会仲裁规则': '黑龙江省各地市仲裁委员会仲裁规则',
  '仲裁申请材料': '仲裁申请材料',
  '救济途径': '司法监督救济途径',
  '仲裁须知': '仲裁须知'
}

async function initGonggao (setData) {
  const [e, d] = await awaitWrap(getGonggaoRequest())
  if (e === null && d !== null) {
    setData(d.list.length > 0 ? d.list[0] : null)
  }
}

async function initBanner (setList) {
  const [e, d] = await awaitWrap(getBannerRequest())
  if (e === null && d !== null) {
    d.list.forEach(li => {
      const files = li.file instanceof Array && li.file.length > 0 ? li.file : []
      li.isPic = false
      li.hasFile = false
      li.preview = []
      if (files.length > 0) {
        li.hasFile = true
        li.isPic = files.every(li => /.*\.(jpg|jpeg|png)$/.test(li.filename.toLowerCase()))
        li.preview = files.map(li => `${root}/${li.path}`)
      }
    })
    setList(d.list)
  }
}

function Main () {
  const h = useHistory()
  const [gonggao, setGonggao] = useState(null)
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  const [picUrl, setPicUrl] = useState([])
  useEffect(() => {
    setLoading(true)
    Promise.all([initGonggao(setGonggao), initBanner(setList)])
      .then(() => {
        setLoading(false)
      }, () => {
        setLoading(false)
      })
  }, [])
  if (loading) {
    return (
      <div className={style.loading}>
        <Skeleton.Title animated />
        <Skeleton.Paragraph animated />
      </div>
    )
  }
  return (
    <div className={style.container}>
      <div className={style.header}>
        <div className={style.search}>
          <SearchBar className={style['search-bar']} placeholder='请输入需要搜索的事项' onSearch={e => { h.push(`${root}/gate/public-news-list?search=${e}`) }} />
        </div>
        <div className={style['btns-container']}>
          <div className={style.btns}>
            <div className={style.btn} onClick={() => { h.push(`${root}/gate/institutions/register`) }}>
              <div className={style['btn-icon']}>
                <img src={btn1} />
              </div>
              <div className={style['btn-title']}>申请仲裁</div>
            </div>
            <div className={style.btn} onClick={() => { h.push(`${root}/gate/institutions/cases`) }}>
              <div className={style['btn-icon']}>
                <img src={btn2} />
              </div>
              <div className={style['btn-title']}>我的案件</div>
            </div>
            <div className={style.btn} onClick={() => { h.push(`${root}/gate/public-doclib-list`) }}>
              <div className={style['btn-icon']}>
                <img src={btn3} />
              </div>
              <div className={style['btn-title']}>文书下载</div>
            </div>
            <div className={style.btn} onClick={() => { h.push(`${root}/gate/public-knowledge-list`) }}>
              <div className={style['btn-icon']}>
                <img src={btn4} />
              </div>
              <div className={style['btn-title']}>知识库</div>
            </div>
            <div className={style.btn} onClick={() => {
              // eslint-disable-next-line no-undef
              if (typeof wx !== 'undefined' && wx.miniProgram) {
                  // eslint-disable-next-line no-undef
                  wx.miniProgram.navigateTo({
                    url: '/pages/flfgk/index'
                  });
              }
            }}>
              <div className={style['btn-icon']}>
                <img src={btn5} />
              </div>
              <div className={style['btn-title']}>法律法规</div>
            </div>
          </div>
        </div>
      </div>

      <div className={style.gonggao}>
        <img src={gonggaoPic} className={style['gonggao-icon']} />
        <span className={style['gonggao-dot']} />
        <div className={style['gonggao-text']}>
          <div className={style['gonggao-text-inner']}>
            {gonggao && <a onClick={() => { h.push(`${root}/gate/public-gonggao-detail/${gonggao.id}`) }}>{gonggao.title}</a>}
          </div>
        </div>
        <a className={style['gonggao-more']} onClick={() => { h.push(`${root}/gate/public-gonggao-list`) }}>更多<span className={style['more-icon']}>&gt;</span></a>
      </div>

      <div className={style.items}>
        {
          list.map((li, i) => {
            const o = imgMap[li.title]
            return (
              <div className={style.item} key={i} onClick={() => {
                if (li.isPic && li.preview) {
                  setPicUrl(li.preview)
                  // window.open(li.preview, '_blank')
                } else if (typeof li.url === 'string' && li.url !== '') {
                  const type = listMap[li.title]
                  h.push(`${root}/gate/public-article-list?type=${type}`)
                } else {
                  h.push(`${root}/gate/public-article-detail/${li.id}`)
                }
              }}>
                {o && <img src={o} />}
              </div>
            )
          })
        }
      </div>
      <ImageViewer.Multi images={picUrl} visible={picUrl.length > 0} onClose={() => setPicUrl('')} />
    </div>
  )
}

export default Main
